<template>
  <view class="confirm-page">
    <!-- 收货地址 -->
    <view class="address-section" @click="selectAddress">
      <view v-if="selectedAddress">
        <view class="address-info">
          <text class="name">{{selectedAddress.name}}</text>
          <text class="phone">{{selectedAddress.phone}}</text>
        </view>
        <text class="address-detail">{{selectedAddress.detail}}</text>
      </view>
      <view v-else class="add-address" @click="dizhixz">
        <text>请选择收货地址</text>
      </view>
      <uni-icons type="arrowright" size="20"></uni-icons>
    </view>
    
    <!-- 订单商品 -->
    <view class="order-section">
      <view class="section-title">订单商品</view>
      <view class="order-list">
        <view 
          v-for="(item, index) in orderItems" 
          :key="index"
          class="order-item"
        >
          <text class="food-name">{{item.name}} × {{item.count}}</text>
          <text class="food-price">¥{{(item.price * item.count).toFixed(2)}}</text>
        </view>
      </view>
    </view>
    
    <!-- 备注 -->
    <view class="remark-section">
      <view class="section-title">备注</view>
      <textarea 
        v-model="remark" 
        placeholder="请输入备注信息" 
        class="remark-input"
      ></textarea>
    </view>
    
    <!-- 订单汇总 -->
    <view class="summary-section">
      <view class="summary-item">
        <text>商品金额</text>
        <text>¥{{totalPrice.toFixed(2)}}</text>
      </view>
      <view class="summary-item">
        <text>配送费</text>
        <text>¥{{deliveryFee.toFixed(2)}}</text>
      </view>
      <view class="summary-item total">
        <text>实付款</text>
        <text>¥{{(totalPrice + deliveryFee).toFixed(2)}}</text>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-bar">
      <button class="submit-btn" @click="confirmOrder">提交订单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedAddress: null,
      orderItems: [], // 订单商品
      remark: '', // 备注
      deliveryFee: 5 // 配送费
    }
  },
  computed: {
    // 商品总价
    totalPrice() {
      return this.orderItems.reduce((sum, item) => sum + item.price * item.count, 0);
    }
  },
  onLoad(options) {
	    this.orderItems = JSON.parse(decodeURIComponent(options.data))
		console.log(this.orderItems)
    // // 从vuex或本地存储获取订单商品
    // const cartItems = uni.getStorageSync('cartItems') || {};
    // const foods = uni.getStorageSync('foods') || [];
    
    this.orderItems = Object.entries(cartItems).map(([id, count]) => {
      const food = foods.find(item => item.id == id);
      return {
        id,
        name: food ? food.name : '',
        price: food ? food.price : 0,
        count
      };
    });
    
    // 获取默认地址
    this.selectedAddress = uni.getStorageSync('selectedAddress') || null;
  },
  methods: {
    // 选择地址
    selectAddress() {
      uni.navigateTo({
        url: '/pages/index/dizhi'
      });
    },
    // 确认订单
    confirmOrder() {
      if (!this.selectedAddress) {
        uni.showToast({
          title: '请选择收货地址',
          icon: 'none'
        });
        return;
      }
      
      const order = {
        id: Date.now().toString(),
        items: this.orderItems,
        address: this.selectedAddress,
        remark: this.remark,
        total: this.totalPrice + this.deliveryFee,
        status: 1, // 1-待支付
        createTime: new Date().toISOString()
      };
      
      // 保存订单
      const orders = uni.getStorageSync('orders') || [];
      orders.unshift(order);
      uni.setStorageSync('orders', orders);
      
      // 清空购物车
      uni.removeStorageSync('cartItems');
      
      // 跳转到支付页面
      uni.redirectTo({
        url: `/pages/index/payment?id=${order.id}`
      });
    }
  }
}
</script>

<style scoped>
.confirm-page {
  padding-bottom: 100px;
}

.address-section {
  display: flex;
  align-items: center;
  padding: 15px;
  margin: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.address-info {
  margin-bottom: 5px;
}

.name {
  margin-right: 10px;
  font-weight: bold;
}

.phone {
  color: #666;
}

.address-detail {
  color: #666;
  font-size: 14px;
}

.add-address {
  flex: 1;
  color: #999;
}

.section-title {
  padding: 15px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

.order-section {
  margin: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.order-list {
  padding: 0 15px;
}

.order-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.food-name {
  color: #666;
}

.food-price {
  color: #1296db;
}

.remark-section {
  margin: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.remark-input {
  width: 100%;
  height: 80px;
  padding: 15px;
  box-sizing: border-box;
}

.summary-section {
  margin: 10px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #666;
}

.summary-item.total {
  font-weight: bold;
  color: #1296db;
  font-size: 16px;
}

.submit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.submit-btn {
  background: #1296db;
  color: #fff;
  border-radius: 20px;
  padding: 8px 25px;
}
</style>